<template>
	<div class="h-full relative text-center">
		<base-icon
			v-if="false"
			name="waiter"
			class="text-[20px] absolute right-3 top-3 cursor-pointer"
			@click="customerService" />
		<div class="mt-10 app-font-bold">{{ $t('region.title') }}</div>
		<div class="mt-4 text-xl app-font-bold">{{ $t('region.subtitle') }}</div>
		<base-select
			labelT="region.select"
			class="mt-[90px] mx-9"
			:options="getRegionList()"
			v-model="regionId"></base-select>
		<div class="absolute bottom-12 left-10 right-10">
			<div class="mb-2 text-sm text-t-4">{{ $t('region.submitTip') }}</div>
			<base-button type="primary" :disabled="submitDisabled" :loading="loading" @click="onSubmit">
				{{ $t('region.submit') }}
			</base-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { BaseIcon, BaseSelect, BaseButton } from '@/components/base'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore, useAccountStore } from '@/store'
import { AccountShowType } from '@/types'
// import { AccountShowType } from '@/store/modules/popup'
import { DEFAULT_REGION } from '@/constants'
import { customerService, getRegionList, t } from '@/utils'
import { useRequest } from '@/hooks'
import { setLocation } from '@/api/account'

const router = useRouter()

const appStore = useAppStore()
const accountStore = useAccountStore()

const regionId = ref(DEFAULT_REGION)

const { loading, run } = useRequest(setLocation, {
	showSuccess: t('region.success'),
	showError: true,
	onSuccess: () => {
		appStore.setRegion(regionId.value)
		accountStore.showAccount(AccountShowType.none)
		router.replace('/')
	}
})

const submitDisabled = computed(() => !regionId.value)

const onSubmit = () => {
	run({
		locationId: regionId.value
	})
}
</script>
